ปลดล็อกประสิทธิภาพด้วย CSS Extend: เชี่ยวชาญการสืบทอดสไตล์เพื่อการออกแบบที่ขยายขนาดได้

ในโลกของการพัฒนาเว็บที่เปลี่ยนแปลงตลอดเวลา การเขียน CSS ที่มีประสิทธิภาพและบำรุงรักษาง่ายถือเป็นสิ่งสำคัญอย่างยิ่ง เมื่อโปรเจกต์มีความซับซ้อนมากขึ้น ความต้องการระบบที่แข็งแกร่งในการจัดการสไตล์ก็ยิ่งมีความสำคัญมากขึ้น หนึ่งในเครื่องมือที่ทรงพลังในคลังแสง CSS ของคุณคือแนวคิดของ "Extend" ซึ่งช่วยอำนวยความสะดวกในการสืบทอดสไตล์และส่งเสริมการใช้โค้ดซ้ำ บทความนี้จะเจาะลึกเกี่ยวกับกฎ CSS Extend สำรวจการนำไปใช้ ประโยชน์ และแนวทางปฏิบัติที่ดีที่สุดสำหรับการสร้างการออกแบบที่ขยายขนาดได้และบำรุงรักษาง่าย

CSS Extend คืออะไร?

CSS Extend ซึ่งโดยหลักแล้วเกี่ยวข้องกับ CSS preprocessors เช่น Sass และ Less เป็นกลไกที่ช่วยให้สามารถสืบทอดสไตล์จาก selector หนึ่งไปยังอีก selector หนึ่งได้ ซึ่งแตกต่างจากการสืบทอดสไตล์แบบดั้งเดิมของ CSS ที่จะใช้สไตล์ไล่ลงไปตาม DOM tree แต่ Extend ช่วยให้คุณสามารถนำกฎสไตล์ที่มีอยู่มาใช้ซ้ำภายในโค้ดเบส CSS ของคุณได้อย่างชัดเจน สิ่งนี้นำไปสู่ CSS ที่สะอาดขึ้น มีการจัดระเบียบที่ดีขึ้น และลดความซ้ำซ้อน

แม้ว่า CSS แบบดั้งเดิมจะไม่มีคำสั่งที่เทียบเท่าโดยตรงกับคำสั่ง `@extend` ของ Sass หรือ Less แต่หลักการของการนำสไตล์กลับมาใช้ใหม่และการประกอบสไตล์สามารถทำได้ผ่านวิธีอื่น ๆ เช่น CSS variables, mixins (ผ่าน preprocessors) และตัว cascade เอง เราจะสำรวจว่าแนวคิดเหล่านี้เกี่ยวข้องกับกระบวนทัศน์ของ Extend อย่างไร

ทำไมต้องใช้ CSS Extend?

• ลดความซ้ำซ้อนของโค้ด: Extend ช่วยลด CSS ที่ซ้ำซ้อนโดยอนุญาตให้คุณสืบทอดสไตล์จากกฎที่มีอยู่แล้ว ซึ่งช่วยลดขนาดโดยรวมของ stylesheets ของคุณ
• เพิ่มความสามารถในการบำรุงรักษา: เมื่อคุณต้องการแก้ไขสไตล์ คุณเพียงแค่ต้องเปลี่ยนในที่เดียว และ selectors ทั้งหมดที่ extend มันจะได้รับการเปลี่ยนแปลงโดยอัตโนมัติ ซึ่งช่วยให้การบำรุงรักษาง่ายขึ้นและลดความเสี่ยงของความไม่สอดคล้องกัน
• ปรับปรุงการจัดระเบียบ: ด้วยการสร้างลำดับชั้นของสไตล์ที่ชัดเจน Extend ช่วยจัดระเบียบ CSS ของคุณและทำให้ง่ายต่อการทำความเข้าใจและนำทาง
• ส่งเสริมความสามารถในการขยายขนาด: เมื่อโปรเจกต์ของคุณเติบโตขึ้น Extend ช่วยให้คุณสร้างสถาปัตยกรรม CSS แบบโมดูลาร์และขยายขนาดได้ ทำให้มั่นใจได้ว่าสไตล์ของคุณยังคงจัดการได้และมีประสิทธิภาพ

การใช้งานกับ Sass

Sass มีคำสั่ง `@extend` ซึ่งช่วยให้คุณสามารถสืบทอดสไตล์ของ selector หนึ่งไปยังอีก selector หนึ่งได้ นี่คือตัวอย่างพื้นฐาน:

            .button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

.primary-button {
  @extend .button;
  background-color: #28a745;
}

            

              
                Copy
              
            
          

ในตัวอย่างนี้ `.primary-button` จะสืบทอดสไตล์ทั้งหมดจาก `.button` แล้วเขียนทับ `background-color` CSS ที่คอมไพล์แล้วจะมีลักษณะดังนี้:

            .button, .primary-button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

.primary-button {
  background-color: #28a745;
}

            

              
                Copy
              
            
          

Placeholder Selectors

Sass ยังมี placeholder selectors (`%`) ซึ่งถูกออกแบบมาโดยเฉพาะเพื่อใช้กับ `@extend` โดย Placeholder selectors จะไม่ถูกคอมไพล์เป็น CSS เว้นแต่จะถูก extend โดย selector อื่น สิ่งนี้มีประโยชน์สำหรับการสร้างสไตล์พื้นฐานที่คุณไม่ต้องการนำไปใช้กับองค์ประกอบใด ๆ โดยตรง

            %base-heading {
  font-family: sans-serif;
  font-weight: bold;
}

h1 {
  @extend %base-heading;
  font-size: 2em;
}

h2 {
  @extend %base-heading;
  font-size: 1.5em;
}

            

              
                Copy
              
            
          

การใช้งานกับ Less

Less มีฟังก์ชันที่คล้ายกันโดยใช้ pseudo-class `:extend()` นี่คือวิธีที่คุณสามารถบรรลุผลลัพธ์เดียวกันกับตัวอย่าง Sass ข้างต้น:

            .button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

.primary-button:extend(.button) {
  background-color: #28a745;
}

            

              
                Copy
              
            
          

CSS ที่คอมไพล์แล้วจะมีลักษณะคล้ายกับตัวอย่างของ Sass โดยที่ `.button` และ `.primary-button` จะใช้สไตล์ร่วมกัน

CSS Variables และ Cascade เป็นทางเลือก

แม้ว่า Sass และ Less จะมีคำสั่ง Extend ที่ชัดเจน แต่ CSS สมัยใหม่ก็มีกลไกทางเลือกเพื่อให้ได้ผลลัพธ์ที่คล้ายคลึงกัน โดยเฉพาะในสถานการณ์ที่ง่ายกว่า CSS variables (custom properties) และความเข้าใจอย่างลึกซึ้งเกี่ยวกับ cascade สามารถลดความซ้ำซ้อนของโค้ดได้อย่างมาก

CSS Variables

CSS variables ช่วยให้คุณสามารถกำหนดค่าที่สามารถนำกลับมาใช้ใหม่ได้ทั่วทั้ง stylesheet ของคุณ แม้ว่าจะไม่ได้สืบทอดสไตล์โดยตรงในลักษณะเดียวกับ `@extend` แต่ก็เป็นวิธีที่ทรงพลังในการจัดการค่าที่ใช้ร่วมกัน ตัวอย่างเช่น:

            :root {
  --button-padding: 10px 20px;
  --button-border: none;
  --button-radius: 5px;
  --button-background: #007bff;
  --button-color: white;
}

.button {
  padding: var(--button-padding);
  border: var(--button-border);
  border-radius: var(--button-radius);
  background-color: var(--button-background);
  color: var(--button-color);
  cursor: pointer;
}

.primary-button {
  padding: var(--button-padding);
  border: var(--button-border);
  border-radius: var(--button-radius);
  background-color: #28a745;
  color: var(--button-color);
  cursor: pointer;
}

            

              
                Copy
              
            
          

ในกรณีนี้ การเปลี่ยนค่าของตัวแปรจะเปลี่ยนทุกอินสแตนซ์ที่ใช้ตัวแปรนั้น ซึ่งเป็นการควบคุมแบบรวมศูนย์ในรูปแบบที่คล้ายกับการ extend ลองพิจารณาการเปลี่ยนแปลงต่อไปนี้:

            :root {
  --base-button-style: {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    color: white;
    cursor: pointer;
  }
}

.button {
  --button-background: #007bff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: var(--button-background);
  color: white;
  cursor: pointer;
}

.primary-button {
  --button-background: #28a745;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: var(--button-background);
  color: white;
  cursor: pointer;
}

            

              
                Copy
              
            
          

โค้ดก่อนหน้านี้ไม่ทำงาน CSS variables ไม่สามารถเก็บคุณสมบัติ CSS หลายรายการเช่นนี้ได้ สิ่งสำคัญคือต้องจำไว้ว่า CSS variables เก็บค่าคุณสมบัติได้เพียงค่าเดียวเท่านั้น

The Cascade

ตัว cascade เองก็เป็นรูปแบบหนึ่งของการสืบทอด ด้วยการใช้สไตล์กับองค์ประกอบหลักอย่างมีกลยุทธ์ คุณสามารถสร้างชุดสไตล์พื้นฐานที่สืบทอดโดยองค์ประกอบย่อยได้ ซึ่งสามารถใช้ร่วมกับ CSS variables เพื่อสร้างระบบที่ยืดหยุ่นและบำรุงรักษาง่าย

แนวทางปฏิบัติที่ดีที่สุดสำหรับการใช้ CSS Extend

• ใช้ Placeholder Selectors: เมื่อสร้างสไตล์พื้นฐาน ให้ใช้ placeholder selectors (`%` ใน Sass) เพื่อป้องกันไม่ให้ถูกคอมไพล์เป็น CSS โดยตรง
• หลีกเลี่ยงการ Over-Extending: การ extend สไตล์มากเกินไปอาจนำไปสู่ CSS ที่ซับซ้อนและเข้าใจยาก ควรใช้ Extend อย่างรอบคอบและพิจารณาแนวทางทางเลือก เช่น mixins หรือ CSS variables เมื่อเหมาะสม
• รักษาลำดับชั้นที่ชัดเจน: จัดระเบียบ CSS ของคุณอย่างมีตรรกะ โดยให้สไตล์พื้นฐานอยู่ด้านบนและสไตล์ที่เฉพาะเจาะจงมากขึ้น extend จากสไตล์พื้นฐาน สิ่งนี้จะทำให้ CSS ของคุณง่ายต่อการนำทางและบำรุงรักษา
• คำนึงถึง Specificity: Extend อาจส่งผลต่อ CSS specificity ตรวจสอบให้แน่ใจว่าสไตล์ที่คุณ extend มี specificity ที่ต้องการเพื่อหลีกเลี่ยงพฤติกรรมที่ไม่คาดคิด
• พิจารณา Mixins: Mixins (ที่มีให้ใน preprocessors) เป็นอีกทางเลือกหนึ่งของ Extend ซึ่งบางครั้งอาจมีความยืดหยุ่นมากกว่า โดยเฉพาะเมื่อต้องจัดการกับสไตล์ที่ต้องใช้พารามิเตอร์
• จัดทำเอกสารโค้ดของคุณ: จัดทำเอกสาร CSS ของคุณอย่างชัดเจน รวมถึงระบุว่า selectors ใด extend มาจาก selectors ใด เพื่อให้นักพัฒนาคนอื่น (และตัวคุณเองในอนาคต) เข้าใจโค้ดของคุณได้ง่ายขึ้น

ข้อควรระวังและข้อพิจารณาที่อาจเกิดขึ้น

• ปัญหาด้าน Specificity: `@extend` บางครั้งอาจนำไปสู่ปัญหา specificity ที่ไม่คาดคิดหากไม่ใช้อย่างระมัดระวัง ความเข้าใจใน CSS specificity เป็นสิ่งสำคัญอย่างยิ่งเมื่อทำงานกับ `@extend` เมื่อกฎหนึ่ง extend อีกกฎหนึ่ง selectors จะถูกจัดกลุ่มเข้าด้วยกัน ซึ่งอาจเปลี่ยนแปลง specificity ของกฎที่อาจไม่ปรากฏให้เห็นในทันที ควรทดสอบอย่างละเอียดเสมอหลังจากใช้ `extend` โดยเฉพาะในโปรเจกต์ขนาดใหญ่
• ขนาดไฟล์ที่เพิ่มขึ้น: แม้ว่า `@extend` จะมีเป้าหมายเพื่อลดความซ้ำซ้อน แต่ในบางสถานการณ์ มันอาจ *เพิ่ม* ขนาดไฟล์ CSS สุดท้ายได้ สิ่งนี้เกิดขึ้นเมื่อ selector ที่ถูก extend อย่างหนักถูกใช้ในหลาย ๆ ที่ คอมไพเลอร์จะทำซ้ำสไตล์ที่สืบทอดมาไปยัง selectors หลายตัว ทำให้เกิดความซ้ำซ้อนที่มากกว่าการประหยัดในตอนแรก ควรวิเคราะห์ CSS ที่คอมไพล์แล้วของคุณเพื่อให้แน่ใจว่า `@extend` ช่วยลดขนาดไฟล์จริง ๆ ไม่ใช่เพิ่มขึ้น
• ผลข้างเคียงที่ไม่คาดคิด: เมื่อ selector ถูก extend มันจะกลายเป็นส่วนหนึ่งของทุก selector ที่สืบทอดจากมัน สิ่งนี้อาจทำให้เกิดผลข้างเคียงที่ไม่คาดคิดหากสไตล์ที่สืบทอดมาไม่ได้รับการพิจารณาอย่างรอบคอบในบริบทของ selectors ที่ทำการ extend ควรทดสอบอย่างละเอียดเสมอและระวังความขัดแย้งของสไตล์ที่อาจเกิดขึ้น
• ความซับซ้อนในการดีบัก: การดีบัก CSS ที่ใช้ `@extend` อย่างหนักอาจซับซ้อนกว่าการดีบัก CSS แบบดั้งเดิม การติดตามที่มาของสไตล์บางอย่างอาจต้องไล่ดูการสืบทอดหลายระดับ ซึ่งอาจใช้เวลานานและสับสน ควรใช้เครื่องมือสำหรับนักพัฒนาในเบราว์เซอร์และ CSS source maps อย่างมีประสิทธิภาพเพื่อช่วยในการดีบัก
• ข้อกังวลด้านการบำรุงรักษาจากการใช้งานมากเกินไป: แม้ว่า `@extend` จะช่วยปรับปรุงการบำรุงรักษาได้เมื่อใช้อย่างเหมาะสม แต่การใช้งานมากเกินไปอาจสร้างเครือข่ายความสัมพันธ์ที่ซับซ้อนซึ่งทำให้ CSS เข้าใจและแก้ไขได้ยากขึ้น ควรพยายามสร้างสมดุลระหว่างการนำโค้ดกลับมาใช้ใหม่และความชัดเจน

Extend vs. Mixins: การเลือกเครื่องมือที่เหมาะสม

ทั้ง Extend และ mixins (มีใน preprocessors อย่าง Sass และ Less) เป็นวิธีการนำโค้ด CSS กลับมาใช้ใหม่ แต่มีความแตกต่างในแนวทางและเหมาะกับสถานการณ์ที่แตกต่างกัน

Extend

• กลไก: สืบทอดชุดสไตล์ *ทั้งหมด* จาก selector อื่น โดยหลักการแล้วคือการจัดกลุ่ม selectors เข้าด้วยกันใน CSS ที่คอมไพล์แล้ว
• กรณีการใช้งาน: เหมาะสำหรับการแบ่งปันสไตล์พื้นฐานระหว่างองค์ประกอบหลาย ๆ อย่างที่คุณต้องการสร้างความเชื่อมโยงทางความหมาย (เช่น ปุ่มประเภทต่าง ๆ ที่ใช้สไตล์หลักร่วมกัน) เหมาะที่สุดเมื่อคุณต้องการคุณสมบัติทั้งหมดของคลาสที่ถูก extend โดยไม่มีการแก้ไข
• ผลลัพธ์ที่คอมไพล์: โดยทั่วไปจะให้ CSS ที่มีขนาดเล็กกว่า mixins เมื่อใช้อย่างมีประสิทธิภาพ เนื่องจากมีการทำซ้ำโค้ดน้อยกว่า

Mixins

• กลไก: รวม *สำเนา* ของกฎ CSS ภายใน mixin เข้าไปใน selector ที่เรียกใช้มัน อนุญาตให้มีพารามิเตอร์ (arguments) เพื่อปรับแต่งสไตล์ที่รวมเข้ามา
• กรณีการใช้งาน: เหมาะสำหรับส่วนของโค้ดที่ใช้ซ้ำได้ซึ่งคุณต้องการนำไปใช้กับองค์ประกอบหลายอย่างโดยมีการเปลี่ยนแปลงเล็กน้อย ยอดเยี่ยมสำหรับ vendor prefixes, การคำนวณที่ซับซ้อน และสไตล์ที่ต้องใช้พารามิเตอร์ (เช่น การสร้างความกว้างของคอลัมน์กริดที่แตกต่างกัน)
• ผลลัพธ์ที่คอมไพล์: อาจส่งผลให้ไฟล์ CSS มีขนาดใหญ่ขึ้นเนื่องจากการทำซ้ำของโค้ด โดยเฉพาะอย่างยิ่งหาก mixin มีกฎจำนวนมากและถูกเรียกใช้บ่อยครั้ง

ควรใช้อันไหนเมื่อไหร่?

• ใช้ Extend เมื่อ: คุณต้องการสร้างความสัมพันธ์ทางความหมายระหว่างองค์ประกอบต่าง ๆ โดยใช้สไตล์พื้นฐานร่วมกัน *โดยไม่มี* การแก้ไข และการปรับขนาดไฟล์ให้เล็กลงเป็นสิ่งสำคัญ
• ใช้ Mixins เมื่อ: คุณต้องการรวมส่วนย่อยของโค้ดที่ใช้ซ้ำได้ซึ่งมีการเปลี่ยนแปลง จัดการกับ vendor prefixes ทำการคำนวณที่ซับซ้อน หรือปรับแต่งสไตล์ที่รวมเข้ามาโดยใช้พารามิเตอร์

บางครั้ง การผสมผสานระหว่าง Extend และ mixins เป็นแนวทางที่มีประสิทธิภาพที่สุด ตัวอย่างเช่น คุณอาจใช้ Extend เพื่อสร้างสไตล์พื้นฐาน แล้วใช้ mixins เพื่อเพิ่มการเปลี่ยนแปลงหรือการปรับปรุงที่เฉพาะเจาะจง

ตัวอย่างและการพิจารณาทั่วโลก

หลักการของ CSS Extend และการนำสไตล์กลับมาใช้ใหม่สามารถนำไปใช้ได้ทั่วโลกในภูมิภาคและวัฒนธรรมที่แตกต่างกัน อย่างไรก็ตาม เมื่อออกแบบสำหรับผู้ชมทั่วโลก สิ่งสำคัญคือต้องพิจารณา:

• Typography: ภาษาต่าง ๆ ต้องการตระกูลฟอนต์และขนาดที่แตกต่างกัน ใช้ CSS variables หรือ mixins เพื่อจัดการการตั้งค่า typography ตามภาษาของเนื้อหา ตัวอย่างเช่น เว็บไซต์ที่รองรับทั้งภาษาอังกฤษและภาษาอาหรับอาจใช้ขนาดฟอนต์สำหรับหัวข้อที่แตกต่างกันเพื่อรองรับลักษณะทางสายตาของแต่ละสคริปต์
• Layout: บางภาษา เช่น ภาษาอาหรับและฮิบรู เขียนจากขวาไปซ้าย (RTL) ใช้ CSS logical properties (เช่น `margin-inline-start` แทน `margin-left`) และแอตทริบิวต์ทิศทาง (`dir="rtl"`) เพื่อให้แน่ใจว่าเลย์เอาต์ของคุณปรับให้เข้ากับภาษา RTL ได้อย่างถูกต้อง สามารถใช้ CSS Extend เพื่อแชร์สไตล์เลย์เอาต์ทั่วไปในขณะที่อนุญาตให้มีการเขียนทับเฉพาะสำหรับ RTL
• สี: สีอาจมีความสัมพันธ์ทางวัฒนธรรมที่แตกต่างกันในส่วนต่าง ๆ ของโลก โปรดคำนึงถึงความสัมพันธ์เหล่านี้เมื่อเลือกสีสำหรับเว็บไซต์ของคุณ ตัวอย่างเช่น สีขาวเกี่ยวข้องกับการไว้ทุกข์ในบางวัฒนธรรมเอเชีย ในขณะที่มักเกี่ยวข้องกับความบริสุทธิ์และการเฉลิมฉลองในวัฒนธรรมตะวันตก
• ไอคอน: ตรวจสอบให้แน่ใจว่าไอคอนของคุณเหมาะสมกับวัฒนธรรมและไม่เป็นการดูหมิ่นหรือกีดกันผู้ใช้จากภูมิภาคต่าง ๆ โดยไม่ได้ตั้งใจ หลีกเลี่ยงการใช้สัญลักษณ์ที่อาจมีความหมายแตกต่างกันในวัฒนธรรมที่แตกต่างกัน
• การเข้าถึง (Accessibility): ปฏิบัติตามแนวทางการเข้าถึง (WCAG) เพื่อให้แน่ใจว่าเว็บไซต์ของคุณสามารถใช้งานได้โดยผู้พิการ ซึ่งรวมถึงการให้ข้อความทางเลือกสำหรับรูปภาพ การใช้ HTML เชิงความหมายที่เหมาะสม และการตรวจสอบให้แน่ใจว่าเว็บไซต์ของคุณสามารถนำทางได้โดยใช้คีย์บอร์ด

ตัวอย่าง:

ลองจินตนาการถึงแพลตฟอร์มอีคอมเมิร์ซระดับโลกที่ขายสินค้าทั้งในยุโรปและเอเชีย แพลตฟอร์มนี้ใช้ CSS Extend เพื่อสร้างสไตล์ปุ่มพื้นฐาน แต่จากนั้นใช้ mixins เพื่อปรับแต่งสีของปุ่มตามภูมิภาค ในยุโรป สีปุ่มหลักคือสีน้ำเงิน ในขณะที่ในเอเชียเป็นสีเขียว ซึ่งสะท้อนถึงความชอบและความสัมพันธ์ของสีที่แตกต่างกันในภูมิภาคเหล่านั้น

            // Base button style
.button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  color: white;
  cursor: pointer;
}

// Mixin for setting button background color
@mixin button-background-color($color) {
  background-color: $color;
}

// European button style
.european-button {
  @extend .button;
  @include button-background-color(#007bff); // Blue
}

// Asian button style
.asian-button {
  @extend .button;
  @include button-background-color(#28a745); // Green
}

            

              
                Copy
              
            
          

สรุป

CSS Extend เป็นเทคนิคที่ทรงพลังสำหรับการเขียน CSS ที่มีประสิทธิภาพ บำรุงรักษาง่าย และขยายขนาดได้ ด้วยความเข้าใจในหลักการและแนวทางปฏิบัติที่ดีที่สุด คุณสามารถสร้างโค้ดเบส CSS ที่มีการจัดระเบียบและจัดการได้ง่ายขึ้น แม้ว่า CSS แบบดั้งเดิมจะไม่มีคำสั่ง `@extend` ที่เทียบเท่าโดยตรง แต่แนวคิดเช่น CSS variables และการใช้ cascade อย่างมีกลยุทธ์สามารถช่วยให้ได้ผลลัพธ์ที่คล้ายคลึงกัน อย่าลืมพิจารณาความต้องการเฉพาะของโปรเจกต์ของคุณ และจุดแข็งและจุดอ่อนของแต่ละแนวทางเมื่อเลือกเครื่องมือที่เหมาะสมกับงาน และเมื่อออกแบบสำหรับผู้ชมทั่วโลก ควรคำนึงถึงความแตกต่างทางวัฒนธรรมเสมอและตรวจสอบให้แน่ใจว่าเว็บไซต์ของคุณสามารถเข้าถึงได้และครอบคลุมผู้ใช้ทุกคน โอบรับพลังของ CSS Extend (หรือทางเลือกอื่น ๆ) เพื่อปลดล็อกประสิทธิภาพและสร้างเว็บที่ดีขึ้น

อ่านเพิ่มเติม

• เอกสาร Sass: https://sass-lang.com/documentation/at-rules/extend
• เอกสาร Less: https://lesscss.org/features/#extend-feature
• MDN Web Docs เกี่ยวกับ CSS Variables: https://developer.mozilla.org/en-US/docs/Web/CSS/var()
• Web Accessibility Initiative (WAI): https://www.w3.org/WAI/